<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="wrap">
    <img src="img/star.gif" alt="xx" width="200" id="img">
    <div id="container" style="display: none">
        <h3>星星</h3>
        <p>追星星</p>
    </div>
</div>
<div style="clear: both"></div>
<button type="button" id="btn">显示详细内容</button>
</body>
<script>
    $(function () {
        $('#btn').click(function () {
            if ($(this).text() == '显示详细内容') {
                // $('#container').show('2000');//2秒显示完成

                $('#container').show('slow',function () {
                    //展示-完成-后设置颜色
                    $('h3').css('color','red');
                    //不能用this 这里this指的是container
                    $('#btn').text('隐藏详细内容');
                });
            }else {
                $(this).text('显示详细内容');
                //1s内隐藏完毕
                $('#container').hide('1000');
            }
        })
    })
</script>
</html>